<template>
  <view>
    <button @click="handleClick" v-if="!address">获取我的收货地址</button>

    <view class="address" v-else>
      <!-- 地址 -->
      <view class="detail-address">{{ detailAddress }} </view>
      <!-- 联系人信息 -->
      <view class="detail-user">
        <!-- 姓名 -->
        <view class="userName"></view>
        <!-- 手机号 -->
        <view class="telNumber"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 收货信息
      address: null,
    };
  },
  methods: {
    async handleClick() {
      // 获取用户地址
      const [err, res] = await uni.chooseAddress();
      //console.log(res);
      this.address = res;
    },
  },
  computed: {
    // 用户的详细地址
    detailAddress() {
      // 处理 address
      if (!this.address) return null;

      const { provinceName, cityName, countyName, detailInfo } = this.address;
      return provinceName + cityName + countyName + detailInfo;
    },
  },
};
</script>

<style lang="scss">
.address {
  padding: 15rpx;
  .detail-address {
    font-size: 30rpx;
    font-weight: 700;
  }
  .detail-user {
    display: flex;
    justify-content: space-between;
  }
}
</style>
